<template>
	<view class="sidebar">
		<cl-popup v-model="indexStore.data.sidebar_show" direction="left">
			<scroll-view scroll-y="true" class="h100" :show-scrollbar="false">
				<view class="userInfo flex align-center">
					<image class="avatar" src="/static/images/avatar.jpg" mode="aspectFill"></image>
					<view>
						<view class="username">{{ user.info.userName }}</view>
						<view class="edit" @click="
							indexStore.data.sidebar_show = false;
						router.push('/pages/user/info');
						">{{ $t("index.editUserInfo") }}</view>
					</view>
				</view>
				<view class="list">
					<view class="flex align-center mb10" v-for="(item, index) in list" :key="index"
						@click="toLink(item.url)">
						<image class="icon" :src="item.icon" mode="aspectFill"></image>
						{{ item[cache.lang] }}
					</view>
					<view class="flex align-center mb10" @click="loginOut">
						<image class="icon" src="/static/images/home_icon_setting.png" mode="aspectFill"></image>
						{{ $t("index.loginout") }}
					</view>
				</view>
				<view class="code flex align-center" @click="
					indexStore.data.sidebar_show = false;
				router.push('/pages/user/drivingLicense');
				">
					<image class="icon" src="/static/images/code_.png" mode="aspectFill"></image>
					<view class="flex1 w50">
						<view class="to overflow1">{{ $t("index.advero") }}</view>
						<view class="tt overflow1">{{ $t("index.advert") }}</view>
					</view>
					<cl-icon name="arrow-right" :size="60" color="#0C81F7"></cl-icon>
				</view>
				<image class="banner" src="/static/images/guanggao2.png" mode="aspectFill"></image>
			</scroll-view>
		</cl-popup>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useIndexStore } from "../store/index";
import { router, useStore } from "/@/cool";
const { user } = useStore();
const { cache } = useStore();
const indexStore = useIndexStore();
const list = ref([
	{
		zh: "我的车辆",
		en: "My car",
		icon: "/static/images/home_icon_mycars.png",
		url: "/pages/user/callingCard",
	},
	{
		zh: "我的驾驶证",
		en: "Driving license",
		icon: "/static/images/home_icon_jiazhao.png",
		url: "/pages/user/drivingLicense/index",
	},
	{
		zh: "我的行驶证",
		en: "Vehicle license",
		icon: "/static/images/home_icon_jiazhao.png",
		url: "/pages/user/callingCard/index",
	},
	{
		zh: "我的账单",
		en: "My bill",
		icon: "/static/images/home_icon_zhangdan.png",
		url: "/pages/user/bill/index",
	},
	{
		zh: "发票抬头",
		en: "Invoice title",
		icon: "/static/images/home_icon_zhangdan.png",
		url: "/pages/invoice/index",
	},
	{
		zh: "易码通",
		en: "Easy code",
		icon: "/static/images/home_icon_yimatong.png",
		url: "/pages/user/drivingLicense",
	},
	{
		zh: "我的钱包",
		en: "My wallet",
		icon: "/static/images/home_icon_wallet.png",
		url: "/pages/user/wallet/index",
	},
	{
		zh: "消息通知",
		en: "Message",
		icon: "/static/images/home_icon_push.png",
		url: "/pages/common/message",
	},
	// {
	// 	zh: "我的报案",
	// 	en: "My report",
	// 	icon: "/static/images/home_icon_baoan.png",
	// },
	// {
	// 	zh: "设置",
	// 	en: "Setting",
	// 	icon: "/static/images/home_icon_setting.png",
	// 	url: "/pages/login/index",
	// },
]);

const toLink = (url: string) => {
	if (!url) {
		return;
	}
	indexStore.data.sidebar_show = false;
	// uni.navigateTo({
	// 	url:'/pages/user/drivingLicense'
	// })
	router.push(url);
};

const loginOut = () => {
	indexStore.data.sidebar_show = false;
	user.logout();
}
</script>
<style lang="scss" scoped>
.sidebar {
	:deep(.cl-popup__container) {
		padding: 30rpx !important;
		width: 600rpx !important;
	}

	.userInfo {
		padding-top: 150rpx;

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}

		.username {
			color: #333;
			font-size: 48rpx;
		}

		.edit {
			color: #999;
			font-size: 24rpx;
			margin-top: 6rpx;
		}
	}

	.list {
		margin-top: 10rpx;
		padding: 30rpx;
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		line-height: 88rpx;

		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 30rpx;
		}
	}

	.code {
		width: 100%;
		height: 120rpx;
		background: rgba(255, 255, 255, 0);
		border: 2px solid rgba(12, 129, 247, 0.2);
		border-radius: 60rpx;
		padding: 30rpx 40rpx;
		box-sizing: border-box;

		.icon {
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
		}

		.to {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 34rpx;
			color: #0c81f7;
		}

		.tt {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 22rpx;
			color: #999999;
		}
	}

	.banner {
		width: 100%;
		height: 220rpx;
		border-radius: 20rpx;
		margin-top: 60rpx;
	}
}
</style>
